<!--
 * @Author: zhangjingyu
 * @Date: 2020-10-22 19:30:00
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-03-23 16:50:41
 * @FilePath: \vprisk10.14\src\views\SystemMange\dictManage.vue
 * @Description: 字典管理
-->

<template>
  <!-- 字典管理页面 -->
  <div>
    <el-row class="caliberHierarchy container" :gutter="10">
      <el-col :span="16" class="content-left">
        <el-row class="handleBox">
          <el-col :span="18">
            <el-button @click="addFunc">新增</el-button>
            <el-button @click="editFunc">编辑</el-button>
            <el-button @click="delFunc">删除</el-button>
          </el-col>
          <el-col :span="6">
            <div class="handleIconBox">
              <el-popover
                placement="bottom"
                trigger="click"
                popper-class="icon_porper"
              >
                <div class="search_porper">
                  <el-form
                    :model="searchForm"
                    ref="searchForm"
                    label-width="84px"
                    label-position="right"
                    size="mini"
                  >
                    <el-form-item label="类型编号：" prop="typeId">
                      <el-input
                        v-model="searchForm.typeId"
                        style="width:150px"
                        @keydown.enter.native="searchFunc()"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="类型名称：" prop="typeName">
                      <el-input
                        v-model="searchForm.typeName"
                        style="width:150px"
                        @keydown.enter.native="searchFunc()"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="所属模块：" prop="moduleCode">
                      <el-select
                        v-model="searchForm.moduleCode"
                        placeholder="请选择..."
                        style="width:150px"
                      >
                        <el-option
                          v-for="item in moduleList"
                          :key="item.moduleCode"
                          :value="item.moduleCode"
                          :label="item.moduleName"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="系统字典：" prop="sysFlag">
                      <el-select
                        v-model="searchForm.sysFlag"
                        placeholder="请选择"
                        style="width:150px"
                      >
                        <el-option label="系统字典" value="1"></el-option>
                        <el-option label="业务字典" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                  <div style="text-align:center;padding:10px">
                    <el-button size="mini" @click="searchForm.page=1,searchFunc()">查询</el-button>
                    <el-button size="mini" @click="clearSearch(searchForm)"
                      >重置</el-button
                    >
                  </div>
                </div>
                <i
                  class="iconfont icon-sousuo"
                  title="搜索"
                  slot="reference"
                ></i>
              </el-popover>
              <el-popover
                placement="bottom"
                width="150"
                trigger="click"
                popper-class="icon_porper"
              >
                <div class="operation_checkbox">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox
                      v-for="item in textData"
                      :label="item.label"
                      :key="item.prop"
                      >{{ item.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <i
                  class="iconfont icon-liebiaoshezhi"
                  title="列表设置"
                  slot="reference"
                ></i>
              </el-popover>
            </div>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @row-click="getItemTable"
        >
          <el-table-column
            width="55"
            type="selection"
          ></el-table-column>
          <el-table-column prop="typeId" label="类型编号" v-if="columnState[0]" show-overflow-tooltip >
          </el-table-column>
          <el-table-column
            prop="typeName"
            label="类型名称"
            sortable
            v-if="columnState[1]"
            show-overflow-tooltip 
          >
          </el-table-column>
          <el-table-column
            prop="moduleCode"
            label="所属模块"
            sortable
            v-if="columnState[2]"
            :formatter="getModuleName"
          >
          </el-table-column>
          <el-table-column
            prop="sysFlag"
            label="系统字典"
            v-if="columnState[3]"
            :filter-method="(val, row) => row.sysFlag === val"
            :filters="[
              { text: '系统字典', value: '1' },
              { text: '业务字典', value: '0' }
            ]"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.sysFlag == '1'">
                系统字典
              </div>
              <div v-if="scope.row.sysFlag == '0'">
                业务字典
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          @size-change="sizeChange"
          @current-change="pageChange"
          @refresh="searchFunc"
          :current-page="searchForm.page"
           :page-size="searchForm.size"
          :total="total"
        ></pagination>
      </el-col>
      <el-col :span="8" class="content-right">
        <upper-template noIcon>
          <div slot="buttonArea">
            <el-button @click="addItemFunc">新增</el-button>
            <el-button @click="editItemFunc">编辑</el-button>
            <el-button @click="delItemFunc">删除</el-button>
          </div>
        </upper-template>
        <!-- <div class="title">
          <div style="float:left">
           
          </div>
          <div
            class="handleIconBox"
            style="width:50px;padding-top:16px; padding-right: 70px;"
          >
            <el-popover
              placement="bottom"
              trigger="click"
              popper-class="icon_porper"
            >
              <div class="search_porper">
                <el-form
                  :model="searchFormItem"
                  ref="searchFormItem"
                  label-width="84px"
                  label-position="right"
                  size="mini"
                >
                  <el-form-item label="字典名称：" prop="itemName">
                    <el-input
                      v-model="searchFormItem.itemName"
                      style="width:150px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="是否启用：" prop="status">
                    <el-select
                      v-model="searchFormItem.status"
                      placeholder="请选择"
                      style="width:150px"
                    >
                      <el-option label="启用" value="1"></el-option>
                      <el-option label="锁定" value="0"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div style="text-align:center;padding:10px">
                  <el-button  size="mini" @click="searchFuncItem">查询</el-button>
                  <el-button
                    size="mini"
                    @click="
                     clearSearch(searchFormItem)
                    "
                    >重置</el-button
                  >
                </div>
              </div>
              <i class="iconfont icon-sousuo" title="搜索"
                v-if="false"
               slot="reference"></i>
            </el-popover>
            <el-popover
              placement="bottom"
              width="150"
              trigger="click"
              popper-class="icon_porper"
            >
              <div class="operation_checkbox">
                <el-checkbox-group v-model="checkListRight">
                  <el-checkbox
                    v-for="(item,i) in textDataRight"
                    :label="item.label"
                    :disabled = "item.disabled"
                    :key="i"
                    >{{ item.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <i
                class="iconfont icon-liebiaoshezhi"
                style="padding-left:15px"
                title="列表设置"
                slot="reference"
                v-if="false"
              ></i>
            </el-popover>
          </div>
        </div> -->
        <el-table
          ref="dictItemTable"
          :data="dictItemTable"
          style="width: 100%"
          class="isRightTable"
        >
          <el-table-column
            width="55"
            type="selection"
          ></el-table-column>
          <el-table-column
            prop="itemId"
            label="字典编号"
            show-overflow-tooltip 
            v-if="columnStateR[0]"
          ></el-table-column>
          <el-table-column
            prop="itemName"
            label="字典名称"
            v-if="columnStateR[1]"
            show-overflow-tooltip 
          ></el-table-column>
          <el-table-column
            prop="status"
            label="是否启用"
            v-if="columnStateR[2]"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1">
                <i class="startState"></i>{{$getLabel(scope.row.status,statusList)}}
              </div>
              <div v-if="scope.row.status == 0">
                <i class="unStartState"></i>{{$getLabel(scope.row.status,statusList)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="sortNo"
            label="显示顺序"
            v-if="columnStateR[3]"
            align="center"
          ></el-table-column>
        </el-table>
        <!-- <pagination
      @size-change="sizeChangeItem"
      @current-change="pageChangeItem"
      @refresh="searchFuncItem"
      :current-page="searchFormItem.page"
           :page-size="searchFormItem.size"
      :total="totalItem"
    ></pagination> -->
      </el-col>
    </el-row>
    <!-- 新增/编辑字典类型 -->
    <el-dialog
      v-dialogDrag
      :title="saveDictTitles[saveFlg - 1]"
      :visible.sync="addOrEdit"
      width="514px"
    >
      <el-form
        :model="saveForm"
        ref="saveForm"
        label-width="97px"
        label-position="left"
        :rules="saveFormRules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属模块：" prop="moduleCode">
              <el-select
                v-model="saveForm.moduleCode"
                style="width:100%"
                placeholder="请选择所属模块"
              >
                <el-option
                  v-for="item in moduleList"
                  :key="item.moduleCode"
                  :value="item.moduleCode"
                  :label="item.moduleName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型编号：" prop="typeId">
              <el-input
                :disabled="saveFlg == 2"
                v-model="saveForm.typeId"
                placeholder="请输入字典类型编号"
                maxlength="64"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型名称：" prop="typeName">
              <el-input
                v-model="saveForm.typeName"
                maxlength="40"
                placeholder="请输入字典类型名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveFunc">确 定</el-button>
        <el-button @click="addOrEdit = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增/编辑字典项 -->
    <el-dialog
      v-dialogDrag
      :title="saveItemTitles[saveItemFlg - 1]"
      :visible.sync="isItemVisible"
      width="514px"
    >
      <el-form
        :model="saveItemForm"
        ref="saveItemForm"
        label-width="97px"
        label-position="left"
        :rules="saveItemFormRules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="类型编号：" prop="typeId">
              <el-input
                :disabled="true"
                v-model="saveItemForm.typeId"
                maxlength="40"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="字典编号：" prop="itemId">
              <el-input
                :disabled="saveItemFlg == 2"
                v-model="saveItemForm.itemId"
                placeholder="请输入字典项编号"
                maxlength="40"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="字典名称：" prop="itemName">
              <el-input
                v-model="saveItemForm.itemName"
                placeholder="请输入字典项名称"
                maxlength="40"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="顺序：" prop="sortNo">
              <el-input
                v-model="saveItemForm.sortNo"
                placeholder="请输入字典项顺序"
                maxlength="40"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态：" prop="status">
              <el-select
                v-model="saveItemForm.status"
                placeholder="请选择字典项状态"
                style="width:100%"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveFuncItem">确 定</el-button>
        <el-button @click="isItemVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { systemManage } from "@/api/index";
import { getNameByCode } from "@/lib/util";
import { getDict } from "@/api/getDict";

export default {
  data() {
    return {
      addOrEdit: false, // 新增/编辑字典弹窗
      isItemVisible: false, // 新增/编辑字典项弹窗
      saveFlg: 1, // 1:新增，2：编辑，（字典）
      saveItemFlg: 1, // 1:新增，2：编辑 （字典项）
      saveDictTitles: ["新增字典类型", "编辑字典类型"],
      saveItemTitles: ["新增字典项", "编辑字典项"],
      // 机构树
      orgList: [
        {
          value: "01",
          label: "一级机构",
          children: [{ value: "001", label: "二级机构" }]
        }
      ],
      // 所属模块下拉框
      moduleList: [],
      // 状态字典
      statusList: [],
      // save表单机构树悬停提示
      saveOrgTip: "",
      searchForm: {
        page: 1,
        size: 15
      },
      total: 0,
      saveForm: {
        moduleCode: "",
        typeId: "",
        typeName: ""
      },
      saveItemForm: {
        typeId: "",
        itemId: "",
        itemName: "",
        sortNo: "",
        status: ""
      },
      saveFormRules: {
        typeId: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          {
            pattern: /^[0-9a-zA-Z_]{3,64}$/,
            message: "只能输入3-64位的英文字母、数字、下划线",
            trigger: "blur"
          },
          { validator: this.typeIdValid, trigger: "blur" }
        ],
        typeName: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{1,80}$/,
            message: "只能输入汉字、英文字母、数字、下划线",
            trigger: "blur"
          }
        ],
        moduleCode: [
          { required: true, message: "所属模块必选", trigger: "blur" }
        ]
      },
      saveItemFormRules: {
        typeId: [
          { required: true, message: "该输入项为必输项", trigger: "blur" }
        ],
        itemId: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          {
            pattern: /^[0-9a-zA-Z_]{1,32}$/,
            message: "只能输入1-32位的英文字母、数字、下划线",
            trigger: "blur"
          },
          { validator: this.itemIdValid, trigger: "blur" }
        ],
        itemName: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{1,40}$/,
            message: "只能输入80位内汉字、字母、数字、下划线",
            trigger: "blur"
          }
        ],
        sortNo: [
          {
            pattern: /^[0-9]{1,3}$/,
            message: "输入数值，最大999",
            trigger: "blur"
          }
        ]
      },
      checkList: [],
      checkListRight: [],
      // 完整表头字段
      textData: [
        { label: "字典编号" },
        { label: "类型名称" },
        { label: "所属模块 " },
        { label: "系统字典" }
      ],
      // 右侧字段
      textDataRight: [
        { label: "字典编号", disabled: true },
        { label: "类型名称", disabled: true },
        { label: "是否启用 " },
        { label: "显示顺序" }
      ],
      // 获取table的数据
      tableData: [],
      dictItemTable: [],
      searchFormItem: {
        status: "",
        page: 1,
        size: 999
      },
      totalItem: 0
    };
  },
  created() {
    this.checkListInit();
    this.getModuleList();
    this.getDIct();
    this.$nextTick(() => {
      this.searchFunc();
    });
  },
  computed: {
    columnState() {
      let arr = [],
        arr1 = this.textData,
        arr2 = this.checkList;
      for (let i = 0; i < arr1.length; i++) {
        let flg = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true;
          }
        }
        arr.push(flg);
      }
      return arr;
    },
    columnStateR() {
      let arr = [],
        arr1 = this.textDataRight,
        arr2 = this.checkListRight;
      for (let i = 0; i < arr1.length; i++) {
        let flg = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true;
          }
        }
        arr.push(flg);
      }
      return arr;
    }
  },
  watch: {
    addOrEdit() {
      // 窗口打开或关闭清除校验结果
        console.log("waa")
      if (this.$refs.saveForm) {
        this.$refs.saveForm.clearValidate();
      }
    },
    isItemVisible() {
      // 窗口打开或关闭清除校验结果
      if (this.$refs.saveItemForm) {
        this.$refs.saveItemForm.clearValidate();
      }
    }
  },
  mounted() {
    // this.getList();
  },
  methods: {
    // typeId重复性校验
    typeIdValid(rule, value, callback) {
      // 非新增不校验、
      if (this.saveFlg != 1) {
        callback();
      }
      let data = { typeId: value };
      systemManage.dictTypeCheckTypeIdUnique(data).then(res => {
        if (res.code == 200) {
          callback();
        } else {
          callback(new Error("字典类型编号已存在"));
        }
      });
    },

    // 字典项id重复性校验
    itemIdValid(rule, value, callback) {
      // 非新增不校验、
      if (this.saveItemFlg != 1) {
        callback();
      }
      let data = { typeId: this.saveItemForm.typeId, itemId: value };
      systemManage.dictItemCheckItemIdUnique(data).then(res => {
        if (res.code == 200) {
          callback();
        } else {
          callback(new Error("字典类型编号已存在"));
        }
      });
    },
    // 获取字典
    getDIct() {
      // 启用锁定字典
      getDict("sys_userFlg").then(res => {
        console.log(res, "字典启用");
        if (res.code == 200) {
          this.statusList = res.datas;
        }
      });
    },
    // 处理save表单机构选中事件
    checkFormOrg() {
      let node = this.$refs.saveOrgTree.getCheckedNodes();
      this.$refs.saveOrgTree.dropDownVisible = false; // 隐藏模态框
      if (node.length != 0) {
        this.saveForm.orgName = node[0].label;
        this.saveOrgTip = node[0].label;
      } else {
        this.saveForm.orgName = "";
        this.saveOrgTip = "";
      }
    },
    // 过滤翻译moduleCode
    getModuleName(row) {
      return getNameByCode(
        row.moduleCode,
        this.moduleList,
        "moduleCode",
        "moduleName"
      );
    },
    clearSearch(obj) {
      for (const key in obj) {
        obj[key] = "";
      }
      obj.page = 1;
      obj.size = 15;
    },
    checkListInit() {
      this.checkList = this.textData.map(v => {
        return v.label;
      });
      this.checkListRight = this.textDataRight.map(v => {
        return v.label;
      });
    },
    // 字典查询
    searchFunc() {
      let data = this.searchForm;
      systemManage.dictManageQuery(data).then(res => {
        if (res.code == 200) {
          this.tableData = res.datas.rows;
          this.total = res.datas.total;
          // 右侧默认显示第一个字典类型的字典项
          this.$nextTick(() => {
            if (this.tableData.length > 0) {
              this.getItemTable(this.tableData[0]);
            }
          });
        }
      });
    },
    searchFuncItem() {
      this.getItemTable(this.clickRow);
    },
    addFunc() {
      this.saveFlg = 1;
      for (let k in this.saveForm) {
        this.saveForm[k] = "";
      }
      this.addOrEdit = true;
    },
    editFunc() {
      this.saveFlg = 2;
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      if (row.sysFlag == "1")
        return this.$message.warning("系统字典不允许修改");
      let form = { ...row };
      this.saveForm = form;
      this.addOrEdit = true;
    },

    delFunc() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的字典类");
      }
      let undel = false;
      for (let i = 0; i < selection.length; i++) {
        if (selection[i].sysFlag == "1") {
          undel = true;
          break;
        }
      }
      if (undel) {
        return this.$message.warning("不允许删除系统字典");
      }
      this.$confirm("您确定要删除选中的字典类型吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = { typeIds: selection.map(v => v.typeId) };
          systemManage.dictTypeDelete(data).then(res => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.clickRow.typeId = ""
              this.searchFunc();
              this.dictItemTable = [];
              this.totalItem = 0; 
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    saveFunc() {
      this.$refs["saveForm"].validate(valid => {
        if (valid) {
          let data = this.saveForm;
          systemManage
            .dictSaveType(data)
            .then(res => {
              if (res.code == 200) {
                this.$message.success("保存成功");
                this.addOrEdit = false;
                this.searchFunc();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(err => {});
        }
      });
    },
    addItemFunc() {
      if(this.clickRow.typeId == ''){
        this.$message.warning("请选择左侧数据")
        return
      }
      if (this.clickRow.sysFlag == "1") {
        return this.$message.warning("系统字典不允许修改");
      }
      this.saveItemFlg = 1;
      for (let k in this.saveItemForm) {
        this.saveItemForm[k] = "";
      }
      this.saveItemForm.typeId = this.clickRow.typeId;
      this.isItemVisible = true;
    },
    editItemFunc() {
      if (this.clickRow.sysFlag == "1") {
        return this.$message.warning("系统字典不允许修改");
      }
      this.saveItemFlg = 2;
      let selection = this.$refs.dictItemTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      let form = { ...row };
      this.saveItemForm.typeId = form.id.typeId;
      this.saveItemForm.itemId = form.id.itemId;
      this.saveItemForm.itemName = form.itemName;
      this.saveItemForm.sortNo = form.sortNo;
      this.saveItemForm.status = form.status;
      this.isItemVisible = true;
    },
    saveFuncItem() {
      this.$refs["saveItemForm"].validate(valid => {
        if (valid) {
          let data = this.saveItemForm;
          systemManage
            .dictSaveItem(data)
            .then(res => {
              if (res.code == 200) {
                this.$message.success("保存成功");
                this.isItemVisible = false;
                this.searchFuncItem();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(err => {});
        }
      });
    },
    delItemFunc() {
      if (this.clickRow.sysFlag == "1") {
        return this.$message.warning("系统字典不允许修改");
      }
      let selection = this.$refs.dictItemTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的数据");
      }
      this.$confirm("您确定要删除选中字典项吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            typeId: this.clickRow.typeId,
            itemIds: selection.map(v => v.id.itemId)
          };
          systemManage.dictItemDelete(data).then(res => {
            if (res && res.code == 200) {
              this.$message.success("删除成功");
              this.searchFunc();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    // 获取moduleList
    getModuleList() {
      systemManage.queryAllEnableModules().then(res => {
        if (res && res.code == 200) {
          this.moduleList = res.datas;
        }
      });
    },
    // 点击表格右侧显示字典项
    getItemTable(row) {
      console.log(row);
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
      this.clickRow = row;
      let param = { typeId: row.typeId, ...this.searchFormItem };

      systemManage.dictItemQuery(param).then(res => {
        if (res && res.code == 200) {
          this.dictItemTable = res.datas.rows;
          // 后台查出顺序乱的，排下序
          this.dictItemTable.sort((x, y) => {
            return x.sortNo - y.sortNo;
          });
          this.totalItem = res.datas.total;
        }
      });
    },
    // 获取层级配置口径树
    getConfigTree(row) {
      this.$refs.configTable.toggleRowSelection(row);
    },
    sizeChange(val) {
      this.searchForm.size = val;
      this.searchFunc();
      console.log(`每页 ${val} 条`);
    },
    pageChange(val) {
      this.searchForm.page = val;
      this.searchFunc();
      console.log(`当前页: ${val}`);
    },
    sizeChangeItem(val) {
      this.searchFormItem.size = val;
      this.searchFuncItem();
      console.log(`每页 ${val} 条`);
    },
    pageChangeItem(val) {
      this.searchFormItem.page = val;
      this.searchFuncItem();
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>